<template>
  <div class="lineInfo">
    <div class="lineInfoWrap">
      <div id="lineChart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      newStudentId: "",
      beforClassInfo: [],
      coords: [],
      myChart: null,
    };
  },
  props: ["studentId"],
  watch: {
    studentId: {
      immediate: true, // 立即触发一次
      deep: true,
      handler(newValue) {
        if (newValue) {
          this.getBeforeClassInfoById(newValue);
        }
      },
    },
  },
  methods: {
    dataChart() {
      var chartDom = document.getElementById("lineChart");

      if (this.myChart) {
        this.myChart.dispose();
      }
      this.myChart = echarts.init(chartDom, "dark", {
        renderer: 'canvas',
        useDirtyRect: false
      });
      
      // 添加事件监听器的 passive 选项
      chartDom.addEventListener('wheel', () => {}, { passive: true });
      chartDom.addEventListener('touchstart', () => {}, { passive: true });
      chartDom.addEventListener('touchmove', () => {}, { passive: true });
      
      var option;
      //数据
      var XName = this.beforeClassInfo.map((item) => item.mission_type);
      var data1 = this.beforeClassInfo.map((item) => item.average_score);
      var img = [
        "image://",
        "image://",
        "image://",
        "image://",
      ];
      // var data = [{
      //     coords: this.coords
      // }]

      option = {
        backgroundColor: "rgba(0,0,0,0)",
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            if (!params) return '';
            
            if (params.seriesName === '小灯光') {
              return `${params.name}<br/>平均成绩：${params.value}`;
            } else if (params.seriesName === '滑行的光点' && params.value && params.value[1] !== undefined) {
              return `${params.name}<br/>平均成绩：${params.value[1]}`;
            }
            return '';
          },
          backgroundColor: 'rgba(0, 24, 48, 0.9)',
          borderColor: '#00ffff',
          borderWidth: 1,
          textStyle: {
            color: '#00ffff',
            fontSize: 14
          },
          extraCssText: 'box-shadow: 0 0 8px rgba(0, 255, 255, 0.3);'
        },
        grid: {
          left: "3%",
          top: "10%",
          bottom: "25%",
          right: "3%",
          containLabel: true
        },
        legend: {
          type: "scroll",
          data: ["小灯光", "滑行的光点"],
          itemWidth: 18,
          itemHeight: 12,
          textStyle: {
            color: "#00ffff",
            fontSize: 14,
          },
          show: false,
        },
        yAxis: [
          {
            type: "value",
            position: "left",
            nameTextStyle: {
              color: "#00FFFF",
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "rgba(0, 255, 255, 0.1)",
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              formatter: "{value}",
              color: "#fff",
              fontSize: 12,
              margin: 10
            },
          },
        ],
        xAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#0696f9",
              },
            },
            axisLabel: {
              color: "#fff",
              fontWeight: "normal",
              fontSize: "12",
              margin: 16,
              interval: 0
            },
            data: XName,
          },
        ],
        series: [
          {
            symbolSize: 150,
            symbol: img[2],
            name: "小灯光",
            type: "line",
            data: data1,
            itemStyle: {
              borderWidth: 5,
              color: "#0696f9",
            },
          },
          {
            name: "滑行的光点",
            type: "lines",
            coordinateSystem: "cartesian2d",
            symbolSize: 30,
            polyline: true,
            effect: {
              show: true,
              trailLength: 0,
              symbol: "arrow",
              period: 10, //光点滑动速度
              symbolSize: 150,
              symbol: img[0],
            },
            lineStyle: {
              width: 1,
              opacity: 0.6,
              curveness: 0.2,
            },
            data: this.coords,
          },
        ],
      };

      option && this.myChart.setOption(option);
    },
    getBeforeClassInfoById(id) {
      this.$axios
        .get("/students/getBeforeClassInfoById/" + id)
        .then((res) => {
          this.beforeClassInfo = [...res.data.data]
            .map((item) => ({
              ...item,
              mission_type: "任务" + (Number(item.mission_type)),
            }))
            .sort((a, b) => {
              return (
                Number(a.mission_type.replace("任务", "")) -
                Number(b.mission_type.replace("任务", ""))
              );
            });

          this.coords = this.beforeClassInfo.map((item, index) => {
            if (index < this.beforeClassInfo.length - 1) {
              return {
                coords: [
                  [index, item.average_score],
                  [index + 1, this.beforeClassInfo[index + 1].average_score]
                ]
              };
            }
            return null;
          }).filter(item => item !== null);
          this.dataChart();
        });
    },
  },
};
</script>
<style scoped>
.lineInfo {
  width: 100%;
  height: 100%; 
}

.lineInfoWrap {
  display: flex;
  justify-content: center;
  flex-direction: row;
  background-color: rgba(255, 255, 255, 0);
  width: 100%;
  height: 100%;
}

#lineChart {
  width: 100%;
  height: 100%;
}
</style>